<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)

onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color: ['#5b8ff9'],
      grid: {
        top: 10,
        bottom: 25,
        right: 20,
      },
      xAxis: {
        type: 'category',
        data: ['2020', '2021', '2022', '2023', '2024']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [8281, 9596, 6024, 4, 0],
          type: 'bar',
          barMaxWidth: 20,
          label: {
            show: true,
            position: 'top',
          }
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
